<template>
    <div class="elements-list">
        <div class="element-content">
            <h1>成员管理</h1>
            <div class="item-list">
                <div class="item" @click="openAdditionDialog" v-show="!editState">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </div>
                <div v-for="member in memberStore.member" class="item">
                    {{ member.name }}
                    <input type="checkbox" v-model="operatingList" :value="member.id" v-show="editState" class="checkbox">
                </div>
            </div>
        </div>
        <div class="edit-box">
            <!-- 编辑按钮 -->
            <span class="edit" v-show="!editState" @click="editElements">
                <el-icon>
                    <Edit />
                </el-icon>
                编辑
            </span>
            <!-- 删除按钮 -->
            <span class="edit" v-show="editState" @click="openDeleteDialog">
                <el-icon>
                    <Delete />
                </el-icon>
                删除
            </span>
            <span class="cancel" v-show="editState" @click="cancelEdit">取消</span>
        </div>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog v-model="isShow" title="请输入要新增的元素名称" width="500">
        <el-input v-model="newData.name" placeholder="请输入成员姓名"></el-input>
        <el-input v-model="newData.member" placeholder="请输入成员地位" style="margin-top: 10px;"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="addElement">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog v-model="isShowDelete" title="确定要删除选中的分类吗？" width="500">
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="isShowDelete = false">取消</el-button>
                <el-button type="primary" @click="deleteItems">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useMemberStore from '@/store/modules/member';
import { ElMessage } from 'element-plus'
import { addMember, deleteMembers } from '@/api/member';
import { Member } from '@/types/member';
const memberStore = useMemberStore()
let editState = ref(false)
let isShow = ref(false)
let isShowDelete = ref(false)
let newData = ref<Member>({
    name: '',
    member: ''
})
let operatingList = ref([])
const openAdditionDialog = () => {
    isShow.value = true
}
const openDeleteDialog = () => {
    isShowDelete.value = true
}
const addElement = async () => {
    // 发送请求，刷新，关闭弹窗
    await addMember(newData.value).then(()=>{
        memberStore.getMembers()
        isShow.value = false
    })
}
const editElements = () => {
    editState.value = true
}
const cancelEdit = () => {
    operatingList.value = []
    editState.value = false
}
const deleteItems = async () => {
    if (!operatingList.value.length)
        ElMessage({
            message: '请选择至少一项元素',
            type: 'error'
        })
    else {
        // 删除，刷新，取消编辑
        await deleteMembers(operatingList.value)
        memberStore.getMembers()
        isShowDelete.value = false
        editState.value = false
    }
}
</script>
<style scoped lang="scss">
.elements-list {
    position: relative;
    width: 350px;
    height: 270px;
    margin-left: 30px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid rgb(0, 200, 255);
    box-shadow: 5px 5px 5px rgb(169, 169, 169);
    overflow: hidden;

    .element-content {
        height: 230px;
        overflow: auto;
    }

    h1 {
        margin: 10px 0;
        text-align: center;
    }

    .item-list {
        display: flex;
        flex-wrap: wrap;

        .item {
            position: relative;
            width: 100px;
            height: 60px;
            margin-left: 10px;
            margin-top: 10px;
            padding: 0 10px;
            line-height: 60px;
            text-align: center;
            border: 1px solid rgb(0, 221, 255);
            border-radius: 5px;
            white-space: norwap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;

            :deep(.checkbox) {
                position: absolute;
                right: 0px;
                top: 0px;
                width: 20px;
                height: 20px;
            }
        }

        .item:hover {
            overflow: visible;
            text-overflow: clip;
        }
    }

    .edit-box {
        position: relative;
        width: 100%;
        height: 40px;
    }

    .edit {
        position: absolute;
        right: 20px;
        bottom: 10px;
        cursor: pointer;
    }

    .cancel {
        position: absolute;
        left: 20px;
        bottom: 10px;
        cursor: pointer;
    }
}
</style>